import React from 'react';
import { Form, Breadcrumb, Row, Col, Input, DatePicker, Select, Modal, Button, Pagination, Icon, Cascader, Table, Checkbox, message } from 'antd';
import { Link, hashHistory } from 'react-router';
import $ from 'jquery';
import Config from '../../../common/config';
import './crmOrderDetail.less';
import region from '../../../common/region';
import moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const ManagerInfo = JSON.parse(window.sessionStorage.getItem('UserInfo'));//当前操作人信息
const token = sessionStorage.getItem('token');

const NewAddressForm = Form.create()(
    (props) => {
        const { onSubmit, form, region, visible, handleCancel } = props;
        const { getFieldDecorator } = form;
        const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
        const tailFormItemLayout = { wrapperCol: { span: 16, offset: 6, } };
        return (
            <Modal
                visible={visible}
                title='新增收货地址 打红色*为必填项'
                onCancel={handleCancel}
                footer={null}
                maskClosable={false}
            >
                <Form className='model-y-t' onSubmit={onSubmit}>
                    <FormItem {...formItemLayout} label='所在地区'>
                        {getFieldDecorator('area', {
                            rules: [{ required: true, type: 'array', message: '请选择收货地址所在的地区!' }],
                        })(
                            <Cascader options={region} placeholder='请选择省市区' />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label='详细地址'>
                        {getFieldDecorator('detail', {
                            rules: [{
                                required: true, min: 3, max: 200, message: '请填写您的详细地址，长度在3到200个字符之间',
                            }],
                        })(
                            <Input type='textarea' rows={4} placeholder='建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息' style={{ resize: 'none' }} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label='收货人姓名'>
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, max: 25, message: '请填写正确的收货人姓名',
                            }]
                        })(
                            <Input placeholder='长度不超过25个字符' />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label='联系方式'>
                        {getFieldDecorator('phone', {
                            rules: [{
                                required: true, pattern: /^(1[34578]\d{9})$/, message: '请填写正确的手机号码',
                            }]
                        })(
                            <Input placeholder='请填写您的手机号码' />
                            )}
                    </FormItem>
                    <FormItem className={'zhifu-btn'}>
                        <Button type='primary' style={{ marginLeft: 120, width: 100 }} htmlType='submit'>保存</Button>
                    </FormItem>
                </Form>
            </Modal>
        );
    }
);

class SetOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: sessionStorage.getItem('keyword') ? sessionStorage.getItem('keyword').split(',') : [], // 关键词
            userId: '', // 用户ID
            userVisible: false, // 用户模态框
            userPage: 1, // 用户的当前页
            userPageSize: 10, // 用户的每页显示的条数
            userTotal: 0, // 用户的总数 
            userSizeOptions: ['10', '20', '30', '40'], // 用户的条数选择
            Inkey: '', // 搜索的客户姓名或账号
            customerSource: [], // 客户渠道
            currentCustomerSource: undefined, // 当前选中的客户渠道
            userList: [], // 用户列表
            address: {}, // 收货地址
            visible: false, // 新增收货地址
            switchingaddress: false, // 切换地址弹出框
            addressList: [], // 收货地址列表
            selectAddress: undefined, // 选中的收货地址
            shipping: [], // 物流公司
            assigning: false, //添加商品弹出框
            productList: [], // 商品列表
            productName: '', // 商品名称
            productPage: 1, // 商品的当前页
            productPageSize: 10, // 商品的每页显示的条数
            productTotal: 0, // 商品的总数
            currentProductList: [], // 当前选中的商品列表
            deleteProduct: {}, // 将要删除的商品
            categoryList: [], // 分类列表
            currentCategoryId: '', // 当前分类ID
            visible1: false, //删除弹出框
            collectionMoney: '', // 代收金额
            payType: [], // 支付类型
            expectedKuaidi100Code: '', // 快递方式编码
            departmentList: [], // 部门列表
            staffList: [], // 员工列表
            currentStaff: undefined, // 当前选中的人员
            currentDepartment: undefined, // 当前选中的部门

            orderDetail: {}, //订单详情
            isEditMember: false, //是否修改会员的状态
            isEditDeposit: false, //是否修改会员的状态
            isEditProduct: false, //是否修改会员的状态
            user: {}, // 用户信息
            publicVisible: false,//处理订单的操作提示公共模态框
            publicStatus: '', // 公共模态框的状态 1:订单审核 2:恢复订单状态 3:定金审核 4:恢复定金状态 5:签收 6:恢复仓库状态 7:导出
        }
    }

    componentDidMount() {
        this.handleRegion();
        this.getOrderDetail();
        this.getShipping();
        this.getCustomerSource();
        this.getPayType();
    }
    //处理省市区数据
    handleRegion() {
        const setOptions = arr => {
            arr.map((item, key) => {
                item.value = item.name;
                item.label = item.name;
                if (item.child) {
                    item.children = item.child;
                    setOptions(item.children);
                }
            });
        }
        setOptions(region);
        this.setState({
            region
        });
    }

    //获取订单详情
    getOrderDetail() {
        $.ajax({
            url: `${config.CrmOrder}/getOrderDetail`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderId: this.props.params.orderId
            },
            success: res => {
                console.log('获取订单详情', res);
                if (res.code === 200) {
                    const address = {
                        area: res.data.consigneeArea,
                        detail: res.data.consigneeDetail,
                        name: res.data.consigneeName,
                        phone: res.data.consigneePhone
                    }
                    this.setState({
                        orderDetail: res.data,
                        user: res.data.user,
                        address,
                        selectAddress: address,
                        currentProductList: res.data.productList,
                        userId: res.data.user.id,
                        expectedKuaidi100Code: res.data.expectedKuaidi100Code,
                        collectionMoney: res.data.collectionMoney,
                        onePayTypeId: res.data.onePayTypeId,
                        twoPayTypeId: res.data.twoPayTypeId,
                    });
                } else {
                    message.error('服务器繁忙，请稍后再试', 1)
                }
            }
        });
    }
    //显示订单状态
    showOrderStatus(status) {
        let text;
        switch (status) {
            case 0:
                text = '未审核';
                break;
            case 1:
                text = '已审核';
                break;
            case 2:
                text = '待发货';
                break;
            case 3:
                text = '已发货';
                break;
            case 4:
                text = '已签收';
                break;
        }
        return text;
    }
    //显示定金状态
    showDepositStatus(status) {
        let text;
        switch (status) {
            case 0:
                text = '未审核';
                break;
            case 1:
                text = '已审核';
                break;
            case 2:
                text = '待定';
                break;
        }
        return text;
    }

    // 获取物流公司
    getShipping() {
        $.ajax({
            url: `${config.CrmOrder}/getShipping`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取物流公司', res);
                this.setState({
                    shipping: res.data
                });
            }
        });
    }
    //显示订单实际发货的快递公司
    showShipping(code) {
        const { shipping } = this.state;
        for (let val of shipping) {
            if (code == val.Kuaidi100Code) {
                return val.name
            }
        }
    }

    // 获取客户渠道
    getCustomerSource() {
        $.ajax({
            url: `${config.CrmSettings}/crm_customersource/BindSource`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取客户渠道', res);
                if (res.code === 200) {
                    this.setState({
                        customerSource: res.data
                    });
                }
            }
        });
    }
    //显示客户渠道
    showSourcename(id) {
        const { customerSource } = this.state;
        for (let val of customerSource) {
            if (id == val.id) {
                return val.sourcename
            }
        }
    }

    // 显示性别
    showSex(sex) {
        let text;
        switch (sex) {
            case '0':
                text = '女';
                break;
            case '1':
                text = '男';
                break;
            case '2':
                text = '保密';
                break;
        }
        return text;
    }
    // 显示客户状态
    showUserStatus(status) {
        let text;
        switch (status) {
            case 1:
                text = '成交';
                break;
            case 2:
                text = '意向客户';
                break;
        }
        return text;
    }

    //开启修改会员信息
    editMember() {
        this.getAddressList();
        this.setState({
            isEditMember: true,
        })
    }
    //保存修改会员信息
    saveEditMember() {
        const { user, address } = this.state;
        if (JSON.stringify(address) == '{}') {
            return message.error('请填写收货地址');
        }
        const data = {
            id: ManagerInfo.id,
            userId: user.id,
            orderId: this.props.params.orderId,
            consigneeArea: address.area,
            consigneeDetail: address.detail,
            consigneeName: address.name,
            consigneePhone: address.phone,
        }
        $.ajax({
            url: `${config.CrmOrder}/updateUser`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data,
            success: res => {
                console.log('修改订单的会员信息成功', res);
                if (res.code === 200) {
                    message.success('修改订单的会员信息成功', 1);
                    this.setState({
                        isEditMember: false,
                    });
                } else {
                    message.error(`修改订单的会员信息失败，请稍后再试`, 1);
                }
            }
        });
    }
    // 显示用户模态框
    showUser() {
        this.setState({
            userVisible: true
        });
        this.getUserList();
        this.getDepartment();
    }
    // 隐藏用户模态框
    hiddenUser() {
        this.setState({
            userVisible: false,
            userPage: 1,
            userPageSize: 10,
            Inkey: '',
            currentCustomerSource: undefined,
            currentDepartment: undefined,
            currentStaff: undefined,
        });
    }
    // 获取客户列表
    getUserList() {
        $.ajax({
            url: `${config.CrmMember}/crm_user/OrderInUser`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id: JSON.parse(sessionStorage.getItem('UserInfo')).userid,
                pageindex: this.state.userPage,
                pagesize: this.state.userPageSize,
                Inkey: this.state.Inkey,
                customersourceid: this.state.currentCustomerSource,
                departmentid: this.state.currentDepartment,
                manageuserid: this.state.currentStaff,
            },
            success: res => {
                console.log('获取客户列表', res);
                if (res.code === 200) {
                    this.setState({
                        userList: res.data,
                        userTotal: res.datacount
                    });
                }
            }
        });
    }
    // 选择用户的页数
    changeUserPage(page) {
        this.setState({
            userPage: page
        }, () => this.getUserList())
    }
    // 选择用户的每页显示的条数
    changeUserSize(page, pageSize) {
        this.setState({
            userPage: page,
            userPageSize: pageSize
        }, () => this.getUserList())
    }
    // 选择客户渠道
    changeCustomerSource(value) {
        this.setState({
            currentCustomerSource: value
        });
    }
    // 输入客户姓名或账号
    inputUserInfo(e) {
        this.setState({
            Inkey: e.target.value
        });
    }
    // 获取部门以及员工
    getDepartment() {
        $.ajax({
            url: `${config.JuseManager}/department/tree`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取部门以及员工', res);
                if (res.code === 200) {
                    const loop = (list) => {
                        list.map(item => {
                            item.value = item.id;
                            item.label = item.name;
                            if (item.son.length) {
                                item.children = item.son;
                                loop(item.children);
                            }
                        })
                    };
                    loop(res.dep);
                    this.setState({
                        departmentList: res.dep
                    });
                }
            }
        });
    }
    // 选择部门
    selectDepartment(list) {
        const id = list[list.length - 1];
        let staffList = [];
        if (id) {
            const loop = (list, id) => {
                let arr = [];
                list.forEach(item => {
                    if (item.id == id) {
                        arr = arr.concat(item.userlist);
                        item.son.forEach(value => {
                            arr = arr.concat(loop(item.son, value.id));
                        });
                    }
                });
                return arr;
            }
            const { departmentList } = this.state;
            staffList = loop(departmentList, id);
        }
        staffList.forEach((item, index) => {
            item.key = index;
        });
        console.log('选择部门', id)
        this.setState({
            staffList,
            currentStaff: undefined,
            currentDepartment: id
        });
    }
    // 选择员工
    selectStaff(value) {
        console.log('选择员工', value)
        this.setState({
            currentStaff: value
        });
    }
    // 搜索客户
    searchUser() {
        this.setState({
            page: 1
        }, () => this.getUserList());
    }
    // 选择客户
    selectUser(user) {
        console.log('选择客户', user)
        let address = {};
        if (user.addressArea) {
            address = {
                id: user.addressId,
                area: user.addressArea,
                detail: user.addressDetail,
                name: user.addressName,
                phone: user.addressPhone
            }
        }
        this.setState({
            userId: user.id,
            userVisible: false,
            user,
            address,
        }, () => this.getAddressList());
        this.props.form.setFieldsValue({
            userName: user.realname
        });
    }
    // 新增客户
    addUser() {
        this.props.changeMenu('crmAddCrmUser');
        location.hash = '/crmAddCrmUser';
    }
    // 获取地址列表
    getAddressList() {
        $.ajax({
            url: `${config.CrmMember}/crm_user/AddresslistInOrder?userid=${this.state.userId}`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取地址列表', res);
                console.log('this.state.userId', this.state.userId);
                if (res.code === 200) {
                    this.setState({
                        addressList: res.data
                    });
                }
            }
        });
    }
    // 显示新增收货地址模态框
    showModal() {
        if (!this.state.userId) {
            return message.warning('请先选择用户');
        }
        if (this.state.addressList.length > 9) {
            return message.warning('您已经添加了10条地址，不能再添加新地址');
        }
        this.setState({
            visible: true,
        });
    }
    // 隐藏新增地址模态框
    handleCancel() {
        this.setState({
            visible: false,
        });
        this.form.resetFields()
    }
    //提交新增地址表单
    submitNewAddress(e) {
        e.preventDefault();
        const form = this.form;
        form.validateFields((err, values) => {
            if (!err) {
                $.ajax({
                    url: `${config.CrmMember}/crm_user/AddAddressInOrder`,
                    type: 'post',
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    data: {
                        userid: this.state.userId,
                        area: values.area.join(' '),
                        detail: values.detail,
                        name: values.name,
                        phone: values.phone
                    },
                    success: res => {
                        console.log('提交新增地址表单', res);
                        if (res.code === 200) {
                            this.setState({
                                address: res.AddressInfo,
                                visible: false
                            }, () => {
                                this.getAddressList();
                                form.resetFields();
                            })
                        } else if (res.code === 201 && res.mes === '最多保存10个地址！') {
                            message.warning('您已经添加了10条地址，不能再添加新地址');
                        }
                    }
                });
            }
        });
    }
    // 显示切换地址
    showModalswitchingaddress() {
        if (!this.state.userId) {
            return message.warning('请先选择用户');
        }
        this.setState({
            switchingaddress: true,
            selectAddress: this.state.address
        })
    }
    // 隐藏切换地址
    handleCancelswitchingaddress() {
        this.setState({
            switchingaddress: false,
        });
    }
    // 切换收货地址
    selectAddress(address) {
        this.setState({
            selectAddress: address
        });
    }
    // 保存切换收货地址
    saveAddress() {
        this.setState({
            switchingaddress: false,
            address: this.state.selectAddress
        });
    }

    //开启修改商品信息
    editProduct() {
        this.setState({
            isEditProduct: true,
        })
    }
    //保存修改商品信息
    saveEditProduct() {
        const { currentProductList, expectedKuaidi100Code, orderDetail } = this.state;
        if (currentProductList.length == 0) {
            return message.error(`请选择订单的商品`, 1);
        }
        if (!expectedKuaidi100Code) {
            return message.error(`请选择快递方式，不能为空`, 1);
        }
        const remark = this.props.form.getFieldsValue(['remark']).remark || "";
        const data = {
            orderId: this.props.params.orderId,
            expectedKuaidi100Code,
            remark,
        }
        data.productList = currentProductList.map(item => {
            return {
                id: item.productid,
                buyNumber: item.buyNumber
            }
        });
        console.log('修改订单的商品信息data', data);

        $.ajax({
            url: `${config.CrmOrder}/updateProductMessage`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data,
            success: res => {
                console.log('修改订单的商品信息成功', res);
                if (res.code === 200) {
                    message.success('修改订单的商品信息成功', 1);
                    orderDetail.remark = remark;
                    this.setState({
                        isEditProduct: false,
                        orderDetail,
                    });
                } else if (res.code === 204) {
                    message.error(`${res.productName}已下架，修改订单的商品信息失败`, 1);
                } else if (res.code === 205) {
                    message.error(`${res.productName}库存不足，修改订单的商品信息失败`, 1);
                } else {
                    message.error(`服务器繁忙，修改订单的商品信息失败，请稍后再试`, 1);
                }
            }
        });
    }
    // 添加商品
    showModalAssigning() {
        this.setState({
            assigning: true
        })
        this.getCategoryList();
        this.getProductList();
    }
    // 获取分类列表
    getCategoryList() {
        $.ajax({
            url: `${config.JuseGoods}/categories_sk/GetCategoryList`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取分类列表', res);
                if (res.code === 200) {
                    const loop = (list) => {
                        list.map(item => {
                            item.value = item.categoryid;
                            item.label = item.categoryname;
                            if (item.children.length) {
                                loop(item.children);
                            } else {
                                delete item.children;
                            }
                        })
                    };
                    loop(res.data);
                    this.setState({
                        categoryList: res.data
                    });
                }
            }
        });
    }
    // 获取商品列表
    getProductList() {
        const { productName: productname, productPage: pageindex, productPageSize: pagesize, currentCategoryId: categoryid } = this.state;
        $.ajax({
            url: `${config.JuseGoods}/products/GetZXproductList`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                productname,
                pageindex,
                pagesize,
                categoryid
            },
            success: res => {
                console.log('获取商品列表', res);
                if (res.code === 200) {
                    res.data.forEach((item, index) => {
                        item.key = index;
                    });
                    this.setState({
                        productList: res.data,
                        productTotal: res.datacount
                    });
                }
            }
        });
    }
    // 商品列表显示的列
    productColumns() {
        return [{
            title: '内码',
            dataIndex: 'productnumber',
            width: '7%',
        }, {
            title: '产品名称',
            dataIndex: 'productname',
            width: '6%',
        }, {
            title: '库存',
            dataIndex: 'zx_stock',
            width: '6%',
        }, {
            title: '待发货数量',
            dataIndex: 'crmpendeliverynumber',
            width: '6%',
        }, {
            title: '单位',
            dataIndex: 'packing',
            width: '4%',
        }, {
            title: '状态',
            dataIndex: '',
            width: '6%',
            render: record => {
                let text;
                switch (record.salestatus) {
                    case 0:
                        text = '未发步';
                        break;
                    case 1:
                        text = '上架区';
                        break;
                    case 2:
                        text = '下架区';
                        break;
                }
                return text;
            }
        }, {
            title: '选择',
            dataIndex: '',
            width: '5%',
            render: record => {
                for (let val of this.state.currentProductList) {
                    if (val.productid == record.productid) {
                        return "已选择";
                    }
                }
                if (record.salestatus === 1 && record.zx_stock) {
                    return <div><a href='javascript:void(0)' onClick={this.selectProduct.bind(this, record)}>确认选择</a></div>;
                }
                return <div style={{ color: '#ccc' }}>确认选择</div>;
            }
        }];
    }
    // 改变商品分页
    changeProductPage(page) {
        this.setState({
            productPage: page,
            productPageSize: pageSize
        }, () => this.getProductList())
    }
    // 选择商品的每页显示的条数
    changeProductSize(page, pageSize) {
        this.setState({
            productPage: page,
            productPageSize: pageSize
        }, () => this.getProductList())
    }
    // 输入商品名称
    inputProduct(e) {
        this.setState({
            productName: e.target.value
        });
    }
    // 选择分类
    selectCategory(list) {
        this.setState({
            currentCategory: list,
            currentCategoryId: list[list.length - 1]
        });
    }
    // 搜索商品
    searchProduct() {
        this.setState({
            productPage: 1
        }, () => this.getProductList());
    }
    // 隐藏商品列表
    handleCancelAssigning() {
        this.setState({
            assigning: false,
            productName: '',
            currentCategory: [],
            currentCategoryId: undefined,
        }, () => this.getProductList());
    }
    // 选择商品
    selectProduct(product) {
        console.log(product);
        const { currentProductList } = this.state;
        let result = true;
        currentProductList.forEach(item => {
            if (item.productid == product.productid) {
                result = false;
            }
        });
        if (result) {
            product.key = product.productid;
            product.buyNumber = 1;
            currentProductList.push(product);
            this.setState({
                currentProductList
            });
        }
    }
    // 编辑商品列表显示
    currentProductColumns() {
        return [{
            title: '商品名称',
            dataIndex: 'productname',
            width: '7%',
        }, {
            title: '商品数量',
            dataIndex: '',
            width: '6%',
            render: record => {
                return <div className='rowchangecolor'><Input defaultValue={record.buyNumber} onChange={this.changeBuyNumber.bind(this, record)} /></div>;
            }
        }, {
            title: '操作',
            dataIndex: '',
            width: '4%',
            render: record => {
                return <div><a onClick={this.showModal1.bind(this, record)}>删除</a></div>;
            }
        }];
    }
    //订单商品列表显示
    orderProductColumns() {
        return [{
            title: '商品名称',
            dataIndex: 'productname',
            width: '7%',
        }, {
            title: '商品数量',
            dataIndex: 'buyNumber',
            width: '6%',
        }];
    }
    // 改变商品数量
    changeBuyNumber(record, e) {
        const { currentProductList } = this.state;
        currentProductList.forEach(item => {
            if (item.productid == record.productid) {
                e.target.value = parseInt(e.target.value) || '';
                item.buyNumber = e.target.value || 1;
            }
        });
    }
    // 删除商品弹出框事件
    showModal1(record) {
        console.log(record);
        this.setState({
            visible1: true,
            deleteProduct: record
        });
    }
    // 确认删除商品事件
    handleOk1() {
        const { deleteProduct, currentProductList } = this.state;
        currentProductList.forEach((item, index) => {
            if (item.productid == deleteProduct.productid) {
                currentProductList.splice(index, 1);
            }
        });
        this.setState({
            visible1: false,
            deleteProduct: {},
            currentProductList
        });
    }
    // 取消删除商品事件
    handleCancel1() {
        this.setState({
            visible1: false,
        });
    }
    // 选择快递方式
    selectShipping(value) {
        this.setState({
            expectedKuaidi100Code: value
        });
    }

    //开启修改定金信息
    editDeposit() {
        this.setState({
            isEditDeposit: true,
        })
    }
    //保存修改定金信息
    saveEditDeposit() {
        const form = this.props.form;
        form.validateFields((err, values) => {
            if (!err) {
                if (values.depositTwo) {
                    if (values.twoPayTypeId.length == 0) {
                        return message.error('请选择订金2支付类型');
                    }
                }
                const data = {
                    orderId: this.props.params.orderId,
                    orderMoney: values.orderMoney,
                    depositOne: values.depositOne,
                    onePayTypeId: values.onePayTypeId[values.onePayTypeId.length - 1],
                    depositTwo: values.depositTwo,
                    twoPayTypeId: values.twoPayTypeId[values.twoPayTypeId.length - 1],
                    expectedDeliveryDate: values.expectedDeliveryDate.format('YYYY-MM-DD HH:mm:ss'),
                };
                console.log('保存修改定金信息data', data);
                $.ajax({
                    url: `${config.CrmOrder}/updateDeposit`,
                    type: 'post',
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    data,
                    success: res => {
                        console.log('保存修改定金信息', res);
                        if (res.code == 200) {
                            message.success('修改订单的定金信息成功', 1);
                            const { orderDetail } = this.state;
                            orderDetail.orderMoney = data.orderMoney;
                            orderDetail.depositOne = data.depositOne;
                            orderDetail.depositTwo = data.depositTwo;
                            orderDetail.expectedDeliveryDate = data.expectedDeliveryDate;
                            this.setState({
                                isEditDeposit: false,
                                orderDetail,
                                onePayTypeId: data.onePayTypeId,
                                twoPayTypeId: data.twoPayTypeId,
                            })
                        } else {
                            message.error(`修改订单的定金信息失败，请稍后再试`, 1);
                        }
                    }
                });
            } else {
                message.error(`请填写必要的定金信息，再保存`, 1);
            }
        })
    }
    // 获取支付类型
    getPayType() {
        $.ajax({
            url: `${config.CrmSettings}/crm_paytype/GetPayType`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log('获取支付类型', res);
                if (res.code === 200) {
                    const loop = (list) => {
                        list.map(item => {
                            item.value = item.id;
                            item.label = item.paytypename;
                            if (item.children.length) {
                                loop(item.children);
                            } else {
                                delete item.children;
                            }
                        })
                    };
                    loop(res.data);
                    this.setState({
                        payType: res.data
                    }, () => {
                        console.log('支付类型', this.state.payType);
                    });
                }
            }
        });
    }
    //显示完整的支付类型名称和id
    showPayType(id) {
        const { payType } = this.state;
        if (id) {
            for (let firstItem of payType) {
                if (id == firstItem.id) {
                    return {
                        id: [parseInt(firstItem.id)],
                        name: firstItem.paytypename,
                    }
                }
                if (firstItem.children) {
                    for (let secondItem of firstItem.children) {
                        if (id == secondItem.id) {
                            return {
                                id: [parseInt(secondItem.parentid), parseInt(secondItem.id)],
                                name: secondItem.parentPaytypename + '/' + secondItem.paytypename,
                            }
                        }
                    }
                }
            }
            return {
                id: [],
                name: '',
            }
        } else {
            return {
                id: [],
                name: '',
            }
        }
    }
    // 验证金额输入的是否是数字
    validatorMoney(rule, value, callback) {
        this.countMoney();
        if (value) {
            if (Number(value) !== Number(value)) {
                return callback('请输入数字！');
            }
        }
        callback();
    }
    // 计算代收货款
    countMoney() {
        const { orderMoney, depositOne, depositTwo } = this.props.form.getFieldsValue(['orderMoney', 'depositOne', 'depositTwo']);
        let collectionMoney = '';
        if (orderMoney && Number(orderMoney) === Number(orderMoney) && depositOne && Number(depositOne) === Number(depositOne)) {
            collectionMoney = orderMoney - depositOne;
            if (depositTwo) {
                if (Number(depositTwo) === Number(depositTwo)) {
                    collectionMoney = collectionMoney - depositTwo;
                } else {
                    collectionMoney = '';
                }
            }
        }
        this.setState({
            collectionMoney
        });
    }

    // 显示共用模态框
    showPublicModal(value) {
        this.setState({
            publicVisible: true,
            publicStatus: value
        });
    }

    // 隐藏共用模态框
    hiddenPublicModal() {
        this.setState({
            publicVisible: false,
            publicStatus: ''
        });
    }

    // 共用模态框的提示
    showPublicTitle() {
        const { publicStatus } = this.state;
        let text;
        switch (publicStatus) {
            case 1:
                text = `是否确定对该条订单审核通过？`;
                break;
            case 2:
                text = `是否恢复该条订单的审核状态？`;
                break;
            case 3:
                text = `是否确定该条订单的定金已到账？`;
                break;
            case 4:
                text = `是否恢复该条订单的定金审核状态？`;
                break;
            case 5:
                text = `是否签收该条订单？`;
                break;
            case 6:
                text = `是否把该条订单恢复到仓库之前的状态？`;
                break;
        }
        return text;
    }

    // 处理共用模态框事件
    handlePublicModal() {
        const { publicStatus } = this.state;
        this.setState({
            publicVisible: false
        });
        switch (publicStatus) {
            case 1:
                this.examineOrder(this.props.params.orderId, ManagerInfo.id);
                break;
            case 2:
                this.cancelExamineOrder(this.props.params.orderId);
                break;
            case 3:
                this.examineDeposit(this.props.params.orderId, ManagerInfo.id);
                break;
            case 4:
                this.cancelExamineDeposit(this.props.params.orderId);
                break;
            case 5:
                this.sign(this.props.params.orderId, ManagerInfo.id);
                break;
            case 6:
                this.cancelWarehouse(this.props.params.orderId);
                break;
        }
    }

    // 审核订单
    examineOrder(orderId, id) {
        $.ajax({
            url: `${config.CrmOrder}/examineOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id,
                orderList: orderId
            },
            success: res => {
                console.log('审核订单', res);
                if (res.code === 200) {
                    message.success('审核订单成功!', 1);
                    this.getOrderDetail();
                } else {
                    message.error('审核订单失败!', 1);
                }
            }
        });
    }

    // 取消订单审核(恢复订单状态)
    cancelExamineOrder(orderId) {
        $.ajax({
            url: `${config.CrmOrder}/cancelExamineOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderList: orderId
            },
            success: res => {
                console.log('取消订单审核', res);
                if (res.code === 200) {
                    message.success('恢复订单状态成功!', 3);
                    this.getOrderDetail();
                } else {
                    message.error('恢复订单状态失败!', 1);
                }
            }
        });
    }

    // 定金审核
    examineDeposit(orderId, id) {
        $.ajax({
            url: `${config.CrmOrder}/examineDeposit`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id,
                orderList: orderId
            },
            success: res => {
                console.log('定金审核', res);
                if (res.code === 200) {
                    message.success('定金审核成功!', 3);
                    this.getOrderDetail();
                } else {
                    message.error('定金审核失败!', 1);
                }
            }
        });
    }

    // 取消定金审核(恢复定金状态)
    cancelExamineDeposit(orderId) {
        $.ajax({
            url: `${config.CrmOrder}/cancelExamineDeposit`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderList: orderId
            },
            success: res => {
                console.log('恢复定金状态', res);
                if (res.code === 200) {
                    message.success('恢复定金状态成功!', 3);
                    this.getOrderDetail();
                } else {
                    message.error('恢复定金状态失败!', 1);
                }
            }
        });
    }

    // 签收
    sign(orderId, id) {
        $.ajax({
            url: `${config.CrmOrder}/sign`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                id,
                orderList: orderId
            },
            success: res => {
                console.log('签收', res);
                if (res.code === 200) {
                    message.success('签收成功!', 3);
                    this.getOrderDetail();
                } else {
                    message.error('签收失败!', 1);
                }
            }
        });
    }

    // 恢复仓库订单(取消仓库操作)
    cancelWarehouse(orderId) {
        $.ajax({
            url: `${config.CrmOrder}/cancelWarehouse`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                orderList: orderId
            },
            success: res => {
                console.log('恢复仓库订单', res);
                if (res.code === 200) {
                    message.success('恢复仓库订单成功!', 3);
                    this.getOrderDetail();
                } else {
                    message.error('恢复仓库订单失败!', 1);
                }
            }
        });
    }

    //返回订单/发货列表
    backToOrderList() {
        const state = this.props.location.state;
        const paths = {};
        if (state.returnUrl === 1) {
            paths.pathname = '/crmOrderlist';
        } else {
            paths.pathname = '/crmSendList';
        }
        paths.state = state;
        hashHistory.push(paths);
    }

    // 禁止选择的日期
    disabledDate(current) {
        return current && current.valueOf() < Date.now() - 1000 * 60 * 60 * 24;
    }

    render() {
        const { userVisible, userPage, userPageSize, userTotal, userSizeOptions, address, user, selectAddress, shipping, productList, productPage, productPageSize, productTotal,
            orderDetail, isEditMember, isEditDeposit, isEditProduct, onePayTypeId, twoPayTypeId, keyword } = this.state;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        const onePayType = this.showPayType(onePayTypeId);
        const twoPayType = this.showPayType(twoPayTypeId);
        return (
            <div className='contentBox clearfix'>
                <div className='breadcrumb'>
                    <Breadcrumb separator='>'>
                        <Breadcrumb.Item>直销管理</Breadcrumb.Item>
                        <Breadcrumb.Item>订单管理</Breadcrumb.Item>
                        <Breadcrumb.Item>订单详情</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='chengge-e  your_sa clearfix' style={{ marginBottom: 20 }}>
                    <Button className='member-button-aa' style={{ width: 80, marginLeft: 20 }} type='primary' onClick={this.backToOrderList.bind(this)}>返回</Button>
                    {!orderDetail.warehouseStatus && keyword.includes('examineOrder') && <Button className='member-button-aa' style={{ width: 100 }} type='primary' onClick={this.showPublicModal.bind(this, 1)}>订单审核</Button>}
                    {!orderDetail.warehouseStatus && keyword.includes('cancelExamineOrder') && <Button className='member-button-aa' style={{ width: 120 }} type='primary' onClick={this.showPublicModal.bind(this, 2)}>恢复订单状态</Button>}
                    {!orderDetail.warehouseStatus && keyword.includes('examineDeposit') && <Button className='member-button-aa' style={{ width: 100 }} type='primary' onClick={this.showPublicModal.bind(this, 3)}>订金审核</Button>}
                    {!orderDetail.warehouseStatus && keyword.includes('cancelExamineDeposit') && <Button className='member-button-aa' style={{ width: 120 }} type='primary' onClick={this.showPublicModal.bind(this, 4)}>恢复订金状态</Button>}
                    {!orderDetail.warehouseStatus && keyword.includes('sign') && <Button className='member-button-aa' style={{ width: 80 }} type='primary' onClick={this.showPublicModal.bind(this, 5)}>签收</Button>}
                    {!orderDetail.warehouseStatus && keyword.includes('cancelWarehouse') && <Button className='member-button-aa' style={{ width: 120 }} type='primary' onClick={this.showPublicModal.bind(this, 6)}>恢复仓库订单</Button>}
                    <Modal
                        title={false}
                        footer={false}
                        visible={this.state.publicVisible}
                        onCancel={this.hiddenPublicModal.bind(this)}
                        maskClosable={false}
                    >
                        <div className='delets_gg'>
                            <p className='delets_gg1'>温馨提示</p>
                            <p>{this.showPublicTitle()}</p>
                            <p style={{ marginTop: 30 }}>
                                <Button className='member-button-aa' onClick={this.handlePublicModal.bind(this)} style={{ width: 100 }} type='primary'>确定</Button>
                                <Button className='member-button-aa' onClick={this.hiddenPublicModal.bind(this)} style={{ width: 100, marginLeft: 30 }} type='primary'>取消</Button>
                            </p>
                        </div>
                    </Modal>
                </div>
                <div className="order-detail-info clearfix">
                    <ul>
                        <li>订单编号：{orderDetail.orderId}</li>
                        <li>下单时间：{orderDetail.createDate}</li>
                        <li>订单状态：{this.showOrderStatus(orderDetail.orderStatus)}</li>
                        <li>定金状态：{this.showDepositStatus(orderDetail.depositStatus)}</li>
                        <li>快递公司：{this.showShipping(orderDetail.Kuaidi100Code)}</li>
                        <li>快递单号：{orderDetail.shipOrderNumber}</li>
                    </ul>
                </div>
                <Form className='setOrder-form'>
                    <div className='setOrder-member'>
                        <h1>
                            <span>客户信息</span>
                            {
                                keyword.includes('updateUser')
                                    ?
                                    orderDetail.orderStatus == 0 && (isEditMember ? <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={(e) => this.saveEditMember(e)}>保存</a>
                                        : <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={() => this.editMember()}>修改</a>)
                                    :
                                    ''
                            }
                        </h1>
                        <Row>
                            <Col span={6}>
                                <FormItem label='客户姓名' {...formItemLayout}>
                                    {
                                        isEditMember ? getFieldDecorator('userName', {
                                            initialValue: user.realname,
                                            rules: [{ required: true, message: '请选择客户' }],
                                        })(
                                            <Input onClick={this.showUser.bind(this)} readOnly placeholder="请点击选择会员" />
                                            )
                                            : <span>{user.realname}</span>
                                    }
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label='账号' {...formItemLayout}>
                                    <span>{user.phone}</span>
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label='性别' {...formItemLayout}>
                                    <span>{this.showSex(user.sex)}</span>
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label='归属人' {...formItemLayout}>
                                    <span>{user.ManageUserName}</span>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <FormItem label='创建人' {...formItemLayout}>
                                    <span>{user.CeateUserName}</span>
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label='渠道' {...formItemLayout}>
                                    <span>{this.showSourcename(user.customersourceid)}</span>
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label='客户状态' {...formItemLayout}>
                                    <span>{this.showUserStatus(user.customerstatus)}</span>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label='客户需求' labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
                                    <p className='yours_yos'>{user.remark}</p>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <h1 style={{ lineHeight: "39px" }}>
                                    <i style={{ color: '#ff0000' }}>*</i>&nbsp;收货地址
                                    {
                                        isEditMember && <span>
                                            <a className='member-button-tgd-a ' type='primary' onClick={this.showModal.bind(this)} style={{ marginLeft: 20, width: 100 }}><Icon type='plus' />新增</a>
                                            <a className='member-button-tgd-a ' onClick={this.showModalswitchingaddress.bind(this)} style={{ marginLeft: 20, width: 100 }} type='primary'>切换</a>
                                        </span>
                                    }
                                </h1>
                            </Col>
                        </Row>
                        <div className='setordes-naig'>
                            <Row>
                                <Col span={6}>
                                    <FormItem label='收货人' {...formItemLayout}>
                                        <span>{address.name}</span>
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem label='联系方式' {...formItemLayout}>
                                        <span>{address.phone}</span>
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem label='地址' {...formItemLayout}>
                                        <span>{address.area ? address.area + ' ' + address.detail : ''}</span>
                                    </FormItem>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div className='setOrder-deposit'>
                        <h1>
                            <span>定金信息</span>
                            {
                                keyword.includes('updateDeposit')
                                    ?
                                    isEditDeposit ? <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={(e) => this.saveEditDeposit(e)}>保存</a>
                                        : <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={() => this.editDeposit()}>修改</a>
                                    :
                                    ''
                            }
                        </h1>
                        <Row>
                            <Col span={8}>
                                <FormItem label='订单金额' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('orderMoney', {
                                            initialValue: orderDetail.orderMoney,
                                            rules: [{
                                                required: true, message: '请输入订单金额'
                                            },
                                            {
                                                validator: this.validatorMoney.bind(this)
                                            }],
                                        })(
                                            <Input />
                                            )
                                            : <span>{orderDetail.orderMoney}</span>
                                    }
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label='代收货款' {...formItemLayout}>
                                    <span>{this.state.collectionMoney}</span>
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label='预计发货时间' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('expectedDeliveryDate', {
                                            initialValue: moment(orderDetail.expectedDeliveryDate),
                                            rules: [{ type: 'object', required: true, message: '请选择预计发货时间' }],
                                        })(
                                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择预计发货时间" disabledDate={this.disabledDate.bind(this)} />
                                            )
                                            : <span>{orderDetail.expectedDeliveryDate}</span>
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label='订金1' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('depositOne', {
                                            initialValue: orderDetail.depositOne,
                                            rules: [{
                                                required: true, message: '请输入订金'
                                            }, {
                                                validator: this.validatorMoney.bind(this)
                                            }],
                                        })(
                                            <Input />
                                            )
                                            : <span>{orderDetail.depositOne}</span>
                                    }
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label='支付方式' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('onePayTypeId', {
                                            initialValue: onePayType.id,
                                            rules: [{ required: true, message: '请选择支付类型' }]
                                        })(
                                            <Cascader options={this.state.payType} placeholder='请选择支付类型' changeOnSelect />
                                            )
                                            : <span>{onePayType.name}</span>
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={8}>
                                <FormItem label='订金2' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('depositTwo', {
                                            initialValue: orderDetail.depositTwo,
                                            rules: [{ validator: this.validatorMoney.bind(this) }],
                                        })(
                                            <Input />
                                            )
                                            : <span>{orderDetail.depositTwo}</span>
                                    }
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem label='支付方式' {...formItemLayout}>
                                    {
                                        isEditDeposit ? getFieldDecorator('twoPayTypeId', {
                                            initialValue: twoPayType.id,
                                        })(
                                            <Cascader options={this.state.payType} placeholder='请选择支付类型' changeOnSelect />
                                            )
                                            : <span>{twoPayType.name}</span>
                                    }
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className='setOrder-deposit-toya'>
                        <h1>
                            <span>商品信息</span>
                            {
                                keyword.includes('updateProductMessage')
                                    ?
                                    orderDetail.orderStatus == 0 && (isEditProduct ? <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={(e) => this.saveEditProduct(e)}>保存</a>
                                        : <a className='member-button-tgd' style={{ marginLeft: 20 }} onClick={() => this.editProduct()}>修改</a>)
                                    :
                                    ''
                            }
                        </h1>
                        <div style={{ lineHeight: '30px', marginTop: '15px' }}>
                            <i style={{ color: '#ff0000' }}>*</i>&nbsp;快递方式：
                            {
                                isEditProduct ? <Select value={this.state.expectedKuaidi100Code} onChange={this.selectShipping.bind(this)} allowClear style={{ width: "150px" }}>
                                    {
                                        shipping.map((item, index) => {
                                            return <Option key={index} value={item.Kuaidi100Code}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                                    : <span>{this.showShipping(this.state.expectedKuaidi100Code)}</span>
                            }
                            {
                                isEditProduct && <a className='member-button-tgd-a ' onClick={this.showModalAssigning.bind(this)} type='primary' style={{ width: 100, marginLeft: 20 }}>添加商品</a>
                            }
                        </div>
                    </div>
                    {/* 商品列表 */}
                    <div className='setOrder-deposit-tooo'>
                        <Table
                            rowKey="productid"
                            columns={isEditProduct ? this.currentProductColumns() : this.orderProductColumns()}
                            dataSource={this.state.currentProductList}
                            pagination={false}
                            bordered
                        />
                    </div>
                    {/* 备注 */}
                    <div className='setOrder-deposit-tooo' style={{ padding: 0 }}>
                        <FormItem label='备注' labelCol={{ span: 1 }} wrapperCol={{ span: 14 }}>
                            {
                                isEditProduct ? getFieldDecorator('remark', {
                                    initialValue: orderDetail.remark
                                })(
                                    <Input type='textarea' rows={4} style={{ resize: "none" }} />
                                    )
                                    : <span>{orderDetail.remark}</span>
                            }
                        </FormItem>
                    </div>
                </Form>
                {/* 删除选中的商品 */}
                <Modal
                    title='删除'
                    visible={this.state.visible1}
                    onOk={this.handleOk1.bind(this)}
                    onCancel={this.handleCancel1.bind(this)}
                    maskClosable={false}
                >
                    <div className='delets_gg'>
                        <p className='delets_gg1'>温馨提示</p>
                        <p>删除后不可恢复，是否继续删除？</p>
                    </div>
                </Modal>
                {/* 新建地址的模态框 */}
                <NewAddressForm
                    ref={(form) => this.form = form}
                    onSubmit={this.submitNewAddress.bind(this)}
                    region={region}
                    visible={this.state.visible}
                    handleCancel={this.handleCancel.bind(this)}
                />
                {/* 切换地址的模态框 */}
                <Modal title='切换地址'
                    visible={this.state.switchingaddress}
                    onCancel={this.handleCancelswitchingaddress.bind(this)}
                    maskClosable={false}
                    footer={null}
                >
                    <div className='baoigg'>
                        <div className='shuyut'>
                            <ul>
                                {
                                    this.state.addressList.map((item, index) => {
                                        if (item.id == (selectAddress.id || address.id)) {
                                            return <li key={index} className='shuryuu' onClick={this.selectAddress.bind(this, item)}>
                                                <p><span>收货人：</span>{item.name}</p>
                                                <p><span>联系方式：</span>{item.phone}</p>
                                                <p><span>收货地址：</span>{item.area + ' ' + item.detail}</p>
                                            </li>
                                        }
                                        return <li key={index} onClick={this.selectAddress.bind(this, item)} >
                                            <p><span>收货人：</span>{item.name}</p>
                                            <p><span>联系方式：</span>{item.phone}</p>
                                            <p><span>收货地址：</span>{item.area + ' ' + item.detail}</p>
                                        </li>
                                    })
                                }
                            </ul>
                            <div className='youdh-ta' >
                                <Button type='primary' style={{ marginRight: 20, width: 80, height: 30 }} onClick={this.saveAddress.bind(this)}>保存</Button>
                                <Button style={{ width: 80, height: 30 }} onClick={this.handleCancelswitchingaddress.bind(this)}>取消</Button>
                            </div>
                        </div>
                    </div>
                </Modal>
                {/* 选择商品的模态框 */}
                <Modal title='商品列表' visible={this.state.assigning}
                    onOk={this.handleCancelAssigning.bind(this)}
                    onCancel={this.handleCancelAssigning.bind(this)}
                    maskClosable={false}
                    width={'1000px'}
                >
                    <div className='delets_gg'>
                        <div className='addetd addetd-z'>
                            <Input className='addetd-a-r' addonBefore='商品名称' placeholder='请输入' onChange={this.inputProduct.bind(this)} value={this.state.productName} />
                        </div>
                        <div className='addetd addetd-a yryreddd-1'>
                            <Cascader options={this.state.categoryList} value={this.state.currentCategory} onChange={this.selectCategory.bind(this)} placeholder='--请选择产品分类--' changeOnSelect style={{ width: '250px' }} />
                        </div>
                        <Button type='primary' style={{ marginLeft: 50 }} className='member-button' style={{ width: 100, height: 40 }} icon='search' onClick={this.searchProduct.bind(this)}>搜索</Button>
                    </div>
                    <Table
                        columns={this.productColumns()}
                        dataSource={productList}
                        pagination={false}
                        bordered
                    />
                    <div className='goods-label-let clearfix' style={{ float: 'none' }}>
                        <div className='floor-ppagi'>
                            <p className='floor-ppagip'>当前显示 {productTotal ? 1 + (productPage - 1) * productPageSize : 0} - {productPage * productPageSize > productTotal ? productTotal : productPage * productPageSize} 条记录 共 {productTotal} 条记录</p>
                            <Pagination current={productPage} total={productTotal} pageSize={productPageSize} onChange={this.changeProductPage.bind(this)} showSizeChanger
                                pageSizeOptions={userSizeOptions}
                                onShowSizeChange={this.changeProductSize.bind(this)} />
                        </div>
                    </div>
                </Modal>
                {/* 选择会员的模态框 */}
                <Modal
                    className='setOrder-user'
                    visible={userVisible}
                    maskClosable={false}
                    footer={null}
                    closable={false}
                    width={850}
                >
                    <h2>会员列表</h2>
                    <a className='setOrder-user-close' href='javascript:void(0)' onClick={this.hiddenUser.bind(this)}>X</a>
                    <div className='setOrder-user-content'>
                        <div>
                            <input placeholder='请输入客户姓名、账号模糊匹配' className='setOrder-user-input' onChange={this.inputUserInfo.bind(this)} value={this.state.Inkey} />
                            <span>客户渠道</span>
                            <Select className='setOrder-user-channel' onChange={this.changeCustomerSource.bind(this)} allowClear value={this.state.currentCustomerSource}>
                                {
                                    this.state.customerSource.map((item, index) => {
                                        return <Option value={String(item.id)} key={index}>{item.sourcename}</Option>
                                    })
                                }
                            </Select>
                            <Cascader options={this.state.departmentList} placeholder='请选择部门' changeOnSelect onChange={this.selectDepartment.bind(this)} />
                            <Select value={this.state.currentStaff} onChange={this.selectStaff.bind(this)} className='setOrder-user-personnel' placeholder='请选择员工!' allowclear>
                                {
                                    this.state.staffList.map((item, index) => {
                                        return <Option value={String(item.id)} key={index}>{item.name}</Option>
                                    })
                                }
                            </Select>
                            <input type='button' className='setOrder-user-search' value='搜索' onClick={this.searchUser.bind(this)} />
                        </div>
                        <ul className='setOrder-user-list clearfix'>
                            <li>
                                <span></span>
                                <span>姓名</span>
                                <span>账号</span>
                                <span>默认地址</span>
                                <span>客户需求</span>
                            </li>
                            {
                                this.state.userList.map((item, index) => {
                                    return <li key={index}>
                                        <span><input type='button' value='选择' onClick={this.selectUser.bind(this, item)} /></span>
                                        <span>{item.realname}</span>
                                        <span>{item.phone}</span>
                                        <span>{item.addressArea ? item.addressArea.split(' ').join('') + item.addressDetail : ''}</span>
                                        <span>{item.remark}</span>
                                    </li>
                                })
                            }
                        </ul>
                        <Button className='setOrder-user-add' icon='plus' onClick={this.addUser.bind(this)}>新增</Button>
                        <div className='setOrder-user-pagination'>
                            <div>当前显示 {userTotal ? 1 + (userPage - 1) * userPageSize : 0} - {userPage * userPageSize > userTotal ? userTotal : userPage * userPageSize} 条记录 共 {userTotal} 条记录</div>
                            <Pagination
                                current={userPage}
                                pageSize={userPageSize}
                                total={userTotal}
                                onChange={this.changeUserPage.bind(this)}
                                showSizeChanger
                                pageSizeOptions={userSizeOptions}
                                onShowSizeChange={this.changeUserSize.bind(this)}
                            />
                        </div>
                    </div>
                </Modal>
            </div >
        )
    }
}

export default Form.create()(SetOrder);
